<template>
	<view>
		<navbar title=" " leftIcon=" " :autoBack='false' bg='#fff'>
			<view class="leftbtn" slot='leftbtn'>
				南充
				<image src="/static/home/xis.png" class="leftbtn__icon" mode=""></image>
			</view>
			<image src="/static/home/kh.png" slot='rightbtn' class="kh" mode=""></image>
		</navbar>
		<scroll-view scroll-y="true" class="scbox1">
			<view class="con" v-if="!loading">
				<u-swiper :list="list1" height="303rpx" radius='30rpx' bgColor="transparent"></u-swiper>
				<view class="u-flex u-flex-y-center u-flex-between">
					<view class="con__t" v-for="(item,index) in tablist" :key="index" @click="navto(item.url)">
						<view class="con__t__icbox">
							<image src="/static/home/tbg.png" class="con__t__icbox__bg" mode=""></image>
							<image :src="'/static/home/'+item.icon+'.png'" :style="item.s" mode=""></image>
						</view>
						<view class="con__t__text">
							{{item.text}}
						</view>
					</view>
					
				</view>
				<view class="con__title" @click="navto('/pages/home/sjjy')">
					<view class="con__title__b">
						
					</view>
					<view class="con__title__t">
						世界记忆
					</view>
					<image src="/static/home/m.png" class="con__title__m" mode=""></image>
				</view>
				<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap">
					<view class="con__item" v-for="(item,index) in globalmemory" :key="index" @click="navto('/pages/home/celebrity?id='+item.id)">
						<image :src="URL(item.image)" class="con__item__pic" mode="aspectFill"></image>
						<view class="con__item__ms">
							<view class="con__item__ms__name">
								{{item.title}}(第{{index+1}}名)	
							</view>
							<view class="con__item__ms__text u-line-3">
								{{item.intro}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loading-icon :show='loading'></u-loading-icon>
		</scroll-view>
		<tabbar :current="0"></tabbar>
	</view>
</template>

<script>
	import home from '@/api/_home.js'
	export default {
		data() {
			return {
				list1: [],
				tablist:[
					{text:'智能监控',icon:'jk',s:'width: 28rpx;height: 38rpx;margin-left: 22rpx;margin-top: 20rpx;',url:''},
					{text:'周边服务',icon:'fw',s:'width: 45rpx;height: 37rpx;margin-left: 14rpx;margin-top: 23rpx;',url:'/pages/goods/list'},
					{text:'数据云',icon:'sjy',s:'width: 50rpx;height: 35rpx;margin-left: 12rpx;margin-top: 18rpx;',url:'/pages/personal/datagl'},
					{text:'直播广场',icon:'zb',s:'width: 41rpx;height: 32rpx;margin-left: 18rpx;margin-top: 23rpx;',url:''},
					{text:'世界记忆',icon:'jy',s:'width: 43rpx;height: 43rpx;margin-left: 15rpx;margin-top: 19rpx;',url:'/pages/home/sjjy'},
				],
				globalmemory:[],
				loading:false
			}
		},
		methods: {

		},
		onLoad() {
			uni.hideTabBar()
			this.loading=true
			home.initData().then(res=>{
				if(res.data.code==1){
					this.loading=false
					res.data.data.banner.map(t=>{
						this.list1.push(this.URL(t.image))
					})
					this.globalmemory=res.data.data.globalmemory
				}
			})
		}
	}
</script>

<style lang="scss">
	
	.leftbtn {
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #1E1E1E;
		line-height: 30rpx;
		padding: 0 4rpx;

		&__icon {
			width: 16rpx;
			height: 9rpx;
			margin-left: 8rpx;
		}
	}

	.kh {
		width: 38rpx;
		height: 38rpx;
	}

	.scbox1 {
		height: calc(100vh - var(--status-bar-height) - 44px - 128rpx);
		position: relative;

		.con {
			padding: 20rpx 30rpx;
			&__t{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 56rpx 0 50rpx;
				&__icbox{
					width: 77rpx;
					height: 77rpx;
					position: relative;
					&__bg{
						width: 77rpx;
						height: 77rpx;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
				&__text{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 25rpx;
					color: #465977;
					line-height: 25rpx;
					margin-top: 20rpx;
				}
			}
			&__title{
				display: flex;
				align-items: center;
				padding: 0 7rpx 0 6rpx;
				position: relative;
				justify-content: space-between;
				&__b{
					width: 29rpx;
					height: 29rpx;
					background: linear-gradient(-35deg, #BFCDE1 0%, #FFFFFF 100%);
					border-radius: 50%;
					position: absolute;
					top: 0;
					left: 0;
				}
				&__m{
					width: 13rpx;
					height: 23rpx;
				}
				&__t{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #010101;
					line-height: 52rpx;
					position: relative;
				}
			}
			&__item{
				width: 334rpx;
				background: #FFFFFF;
				border: 1rpx solid #BFCDE1;
				border-radius: 20rpx;
				background-color: #fff;
				overflow: hidden;
				margin-top: 24rpx;
				&__pic{
					width: 334rpx;
					height: 344rpx;
					background: #D9D9D9;
					border-bottom: 1rpx solid #BFCDE1;
				}
				&__ms{
					margin-top: -4px;
					padding: 20rpx 20rpx 18rpx;
					
					&__name{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #181818;
						line-height: 26rpx;
						margin-bottom: 7rpx;
					}
					&__text{
						width: 294rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #6F7271;
						line-height: 36rpx;
						height: 110rpx;
					}
				}
			}
		}
	}
</style>